<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__menu">
      <el-form :inline="true" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button v-if="hasPermission('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;">
        <el-table-column prop="name" label="名称" header-align="center" min-width="150"></el-table-column>
        <el-table-column prop="icon" label="图标" header-align="center" align="center">
          <template #default="scope">
            <svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${scope.row.icon}`"></use></svg>
          </template>
        </el-table-column>
        <el-table-column prop="menuType" label="类型" header-align="center" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.menuType ===1" size="small">目录</el-tag>
              <el-tag v-else-if="scope.row.menuType ===2" size="small" type="info">菜单</el-tag>
            <el-tag v-else size="small" type="info">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" header-align="center" align="center"></el-table-column>
        <el-table-column prop="url" label="路由" header-align="center" align="center" width="150" :show-overflow-tooltip="true" ></el-table-column>
        <el-table-column prop="permissions" label="授权标识" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
	      <el-table-column prop="vipPermission" label="vip权限" header-align="center" align="center">
		      <template #default="{row}">
			      <el-text v-if="row.vipPermission" type="primary">是</el-text>
			      <el-text v-else>否</el-text>
		      </template>
	      </el-table-column>
        <el-table-column  label="操作" fixed="right" header-align="center" align="center" width="150">
          <template #default="scope">
            <el-button v-if="hasPermission('sys:menu:update')" type="primary" link size="small" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
            <el-button v-if="hasPermission('sys:menu:delete')" type="primary" link size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script setup>
import AddOrUpdate from './menu-add-or-update.vue'
import {nextTick, reactive, ref, unref} from "vue";
import {hasPermission} from "../../../utils/util.js";
import http from "../../../utils/request.js";
import {message, messageBox} from "../../../utils/commonScript.js";


const url = '/app/menu'

const addOrUpdateRef = ref()
const addOrUpdateVisible = ref(false)
const dataListLoading = ref(false) // 数据列表，loading状态
const dataList = ref([]) // 数据列表


const query = () => {
	dataListLoading.value = true
	http.get(`${url}/list`,
		{
		}
	).then(({data: res}) => {
		dataListLoading.value = false
		if (res.code !== 0) {
			dataList.value = []
			return message.error(res.msg)
		}
		dataList.value = res.data
	}).catch(() => {
		dataListLoading.value = false
	})
}
query()
// 查询
const getDataList = () => {
	query()
}

// 新增 / 修改
const addOrUpdateHandle = (id='') => {
	addOrUpdateVisible.value = true
	nextTick(() => {
		addOrUpdateRef.value.init(id)
	})
}
// 删除
const deleteHandle = (id) => {
	messageBox.confirm('确定进行删除操作?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		http.delete(`${url}/${id}`, {}).then(({data: res}) => {
			if (res.code !== 0) {
				return message.error(res.msg)
			}
			message({
				message: '操作成功',
				type: 'success',
				duration: 500,
				onClose: () => {
					query()
				}
			})
		}).catch(() => {
		})
	}).catch(() => {
	})
}
</script>
